import React from 'react';
import { useAdminPermissions } from '../contexts/AdminPermissionContext';

/**
 * 权限控制高阶组件
 * 根据用户是否拥有指定权限来决定是否渲染目标组件
 * 
 * @param {React.Component} WrappedComponent - 要包装的组件
 * @param {Object} options - 配置选项
 * @param {string|Array<string>} options.permissions - 需要的权限，可以是单个权限字符串或权限数组
 * @param {string|Array<string>} options.roles - 需要的角色，可以是单个角色字符串或角色数组
 * @param {React.ReactNode} options.fallback - 无权限时显示的内容，默认为null（不显示）
 */
const WithPermission = (WrappedComponent, options = {}) => {
  const { permissions = [], roles = [], fallback = null } = options;
  
  const PermissionComponent = (props) => {
    const { hasPermission, hasRole, loading } = useAdminPermissions();
    
    // 加载中状态，可以返回加载指示器
    if (loading) {
      return <div className="permission-loading">权限验证中...</div>;
    }
    
    // 检查权限
    const hasRequiredPermission = Array.isArray(permissions)
      ? permissions.length === 0 || permissions.some(perm => hasPermission(perm))
      : hasPermission(permissions);
      
    // 检查角色
    const hasRequiredRole = Array.isArray(roles)
      ? roles.length === 0 || roles.some(role => hasRole(role))
      : hasRole(roles);
      
    // 如果没有指定权限或角色要求，或者用户满足要求，则渲染组件
    const canRender = permissions.length === 0 && roles.length === 0 || 
                     hasRequiredPermission || 
                     hasRequiredRole;
    
    return canRender ? <WrappedComponent {...props} /> : fallback;
  };
  
  // 保持原始组件的名称和propTypes
  PermissionComponent.displayName = `WithPermission(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  PermissionComponent.propTypes = WrappedComponent.propTypes;
  
  return PermissionComponent;
};

export default WithPermission;